* {
    /*设置内边距为0*/
    padding: 0;
    /*设置外边距为0*/
    margin: 0;
    /*设置盒子的padding和border由自己设置*/
    box-sizing: border-box;
    /*去除下划线*/
    text-decoration: none;
    /*去除<li>的点*/
    list-style: none;
}


#top {
    display: flex;
    margin: 1%;
}

/*logo*/
#top > div {
    flex: 1; /* 设置该元素在弹性布局中占据可用空间的比例为 1，即平均分配可用空间。 */
    display: flex; /* 将该元素设置为 Flex 容器，使其内部的子元素具有 Flexbox 布局的特性。 */
    justify-content: center; /* 在 Flex 容器中，使子元素在主轴上居中对齐。 */
    align-items: center; /* 在 Flex 容器中，使子元素在交叉轴上居中对齐。 */
}

#top > div > p {
    font-family: 楷体;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    display: flex;
    line-height: 100px; /* 也可以根据实际需要设置合适的行高 */
}

#top > div > p > img {
    height: 100px; /* 设置图片高度为100像素 */
}

/*中间搜索框*/
#top > label {
    flex: 1; /* 设置弹性因子为1 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
}

#top > label > input {
    font-size: 18px; /* 设置字体大小为18像素 */
    height: 55%; /* 设置高度为父元素高度的55% */
    width: 60%; /* 设置宽度为父元素宽度的60% */
}

#top > label > button {
    height: 55%; /* 设置高度为父元素高度的55% */
    width: 15%; /* 设置宽度为父元素宽度的15% */
}

#top > label > button:hover {
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
}

/*导航栏*/
#top > ul {
    display: flex; /* 将 ul 设置为 Flex 容器，使其内部的子元素具有 Flexbox 布局的特性。 */
    justify-content: center; /* 在 Flex 容器中，使子元素在主轴上居中对齐。 */
    align-items: center; /* 在 Flex 容器中，使子元素在交叉轴上居中对齐。 */
    flex: 1.5; /* 使用 Flexbox 布局，并将该 ul 的 flex 属性设置为 1.5，以占据可用空间的比例（灵活伸缩）。 */
}

#top > ul > li {
    border-radius: 10px; /* 设置边框圆角为10像素 */
    text-align: center; /* 文本居中对齐 */
    font-family: 楷体; /* 使用楷体字体 */
    font-size: 20px; /* 设置字体大小为20像素 */
    padding: 3% 1% 3% 1%; /* 设置内边距 */
    flex: 1; /* 设置弹性因子为1 */
    font-weight: bold; /* 设置字体加粗 */
}


#top > ul > li:hover {
    cursor: pointer; /* 当鼠标悬停在 <li> 元素上时，改变鼠标样式为手型，表示该元素可点击。 */
    color: white; /* 当鼠标悬停在 <li> 元素上时，改变文字颜色为白色。 */
    background-color: #999999; /* 当鼠标悬停在 <li> 元素上时，改变背景颜色为灰色 (#999999)。 */
}

#centerUp {
    position: relative; /* 设置相对定位 */
    width: 100%; /* 设置宽度为100% */
}

#background {
    width: 100%; /* 设置宽度为100% */
}

#centerWindow {
    width: 72%; /* 设置宽度为72% */
    position: absolute; /* 设置绝对定位 */
    top: 15%; /* 设置距离顶部为15% */
    margin-left: 20%; /* 设置左边距为20% */
    display: flex; /* 使用弹性布局 */
}

/*设置图片大小*/
.centerPic {
    width: 400px; /* 设置图片宽度为400像素 */
}

#centerWindow > p {
    font-size: 20px; /* 设置字体大小为20像素 */
    color: white; /* 设置文字颜色为白色 */
    float: left; /* 设置浮动方式为左浮动 */
    width: 400px; /* 设置宽度为400像素 */
    margin-left: 10%; /* 设置左边距为10% */
    margin-top: 5%; /* 设置上边距为5% */
}

.toggle {
    position: relative; /* 设置相对定位 */
    right: 80px; /* 设置右侧距离为80像素 */
    top: 365px; /* 设置顶部距离为365像素 */
    display: flex; /* 使用弹性布局 */
}

.toggle button {
    margin-right: 12px; /* 设置右边距为 12 像素，用于调整按钮之间的间距。 */
    width: 28px; /* 设置按钮的宽度为 28 像素。 */
    height: 28px; /* 设置按钮的高度为 28 像素。 */
    appearance: none; /* 重置默认样式，使按钮的外观可以自定义。 */
    border: none; /* 移除按钮的边框，使其没有边框。 */
    background: rgba(255, 255, 255, 0.1); /* 设置按钮的背景颜色为带有透明度的白色（0.1），可以通过 rgba 表达颜色和透明度。 */
    color: #fff; /* 设置文字颜色为白色。 */
    border-radius: 4px; /* 设置按钮的圆角半径为 4 像素，使其呈现圆角矩形的外观。 */
    cursor: pointer; /* 当鼠标悬停在按钮上时，将鼠标样式设置为手型，表示该按钮可点击。 */
}

.toggle button:hover {
    background: rgba(255, 255, 255, 0.2); /* 设置悬停时的背景颜色 */
}

.care {
    float: left; /* 设置浮动方式为左浮动 */
    margin: 0 6%; /* 设置外边距 */
    width: 500px; /* 设置宽度为500像素 */
    height: 400px; /* 设置高度为400像素 */
}

.care > img {
    width: 280px; /* 设置图片宽度为280像素 */
    height: 200px; /* 设置图片高度为200像素 */
}

.care > h1 {
    margin-top: 10%; /* 设置上边距为10% */
    margin-right: 10%; /* 设置右边距为10% */
    font-family: 楷体; /* 使用楷体字体 */
    font-size: 55px; /* 设置字体大小为55像素 */
    float: right; /* 设置浮动方式为右浮动 */
}

.care > p {
    margin-top: 5%; /* 设置上边距为5% */
}

footer {
    margin: 55% 0 3% 0; /* 设置外边距 */
    color: #999999; /* 设置文字颜色为灰色 */
    text-align: center; /* 文本居中对齐 */
}

footer > img {
    width: 100%; /* 设置宽度为100% */
}